<template>
  <div id="ProClaim">
    <div id="navigation">
      <ul>
        <li @click="initalize">相关信息</li>
        <li v-for="item in navList"><i class="el-icon-arrow-right"/>{{ item }}</li>
      </ul>
    </div>
    <div ref="proclaim" class="proclaim">
      <ul class="proclaim_list">
        <li v-for="(item,index) in claim_List" @click="get_particulars(index)">{{ item.title }}<span
            style="float: right;margin-right: 10px">{{ item.date }}</span></li>
      </ul>
      <div class="page_skip">
        <ul>
          <li>
            <button @click="homepage">首页</button>
          </li>
          <li>
            <button @click="lastpage">上一页</button>
          </li>
          <li>第{{ nowPage }}/{{ totalPage }}页</li>
          <li>
            <button @click="nextpage">下一页</button>
          </li>
          <li>
            <button @click="trailerpage">尾页</button>
          </li>
          <li>当前页共{{ claim_List.length }}条公告</li>
        </ul>
      </div>
    </div>
    <div ref="proclaim_particulars" class="none" @click="back_particulars">
      <div>
        <p><img src="../../assets/images/back.png"/>{{ particulars.title }}</p>
        <p>日期：{{ particulars.date }}</p>
        <p ref="html" class="html"></p>
        <p>作者：{{ particulars.author }}</p>
      </div>
    </div>
  </div>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "ProClaim",
  data() {
    return {
      navList: [
        '通知公告',
        '新闻资讯',
        '参观交流',
        '业界动态',
        '媒体报道',
        '人员招聘'
      ],
      claim_List: [],
      total_Claim_List: [],
      nowPage: 1,
      totalPage: 1,
      particulars: {
        title: "",
        date: "",
        author: ""
      }
    }
  },
  methods: {
    // 上一页
    lastpage() {
      if (this.nowPage > 1) {//限制措施，防止跳转负溢出
        for (let i = 0; i < 15; i++) {
          this.claim_List[i] = this.total_Claim_List[(this.nowPage - 2) * 15 + i];
        }
        this.nowPage--;
        this.$forceUpdate();//强制刷新页面
      }
    },
    // 下一页
    nextpage() {
      if (this.nowPage < this.totalPage) { //限制措施，防止尾页跳转溢出
        this.claim_List = []; //当前页面清空
        if ((this.totalPage - this.nowPage) > 1) { //非尾页
          for (let i = 0; i < 15; i++) {
            this.claim_List[i] = this.total_Claim_List[this.nowPage * 15 + i];
          }
          this.nowPage++;
          this.$forceUpdate();
        } else if ((this.totalPage - this.nowPage) === 1) { //是尾页
          this.trailerpage()
        }
      }

    },
    //首页
    homepage() {
      if (this.nowPage > 1) {
        for (let i = 0; i < 15; i++) {
          this.claim_List[i] = this.total_Claim_List[i];
        }
        this.nowPage = 1;
        this.$forceUpdate();
      }
    },
    // 尾页
    trailerpage() {
      if (this.nowPage < this.totalPage) {
        this.claim_List = [];
        if ((this.total_Claim_List.length % 15) !== 0) { //不满一页
          for (let i = 0; i < this.total_Claim_List.length % 15; i++) {
            this.claim_List[i] = this.total_Claim_List[(this.totalPage - 1) * 15 + i];
          }
        } else {
          for (let i = 0; i < 15; i++) { //满一页
            this.claim_List[i] = this.total_Claim_List[this.nowPage * 15 + i];
          }
        }
        this.nowPage = this.totalPage;
        this.$forceUpdate();
      }
    },
    // 初始化
    initalize() {
      if (this.prolist.length <= 15) {
        this.claim_List = this.prolist
      } else { //~~位运算取整，最快的取整计算
        this.totalPage = ~~(this.prolist.length / 15) + 1 //总页数
        this.nowPage = 1 //当前所在页
        this.total_Claim_List = this.prolist //所有页面数据
        this.claim_List = this.total_Claim_List.slice(0, 15) //当前页面
      }
    },
    get_particulars(num) {
      let content = this.total_Claim_List[(this.nowPage - 1) * 15 + num]
      this.particulars.title = content.title
      this.particulars.date = content.date
      this.$refs.html.innerHTML = content.html
      this.particulars.author = content.author
      this.$refs.proclaim.className = "none"
      this.$refs.proclaim_particulars.className = "procliam_particulars"
    },
    back_particulars() {
      this.$refs.proclaim_particulars.className = "none"
      this.$refs.proclaim.className = "proclaim"
    },
  },
  computed: {
    ...mapState(['prolist'])
  },
  created() {
    this.initalize()
  },
  watch: { //监听路由变化时触发事件
    '$route': ['initalize', 'back_particulars']
  }
}
</script>

<style scoped>
#ProClaim {
  width: 100%;
  height: 100%;
  background: #fbf9f9;
}

#navigation {
  width: 20%;
  height: 100%;
  float: left;
}

#navigation ul {
  width: 85%;
  height: auto;
  margin: 20px auto 0px auto;
  padding: 0;
  border-top: 3px solid #59ccff;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  font-size: 15px;
  list-style: none;
}

#navigation ul li:first-child {
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  margin-top: 0;
}

#navigation ul li:first-child:hover {
  cursor: context-menu;
  background: white;
  color: black;
}

#navigation ul li:nth-child(2) {
  height: 50px;
  line-height: 50px;
}

#navigation ul li {
  height: 30px;
  line-height: 30px;
  padding-top: 5px;
  padding-left: 10px;
  border-bottom: 1px solid #eee;
}

#navigation ul li:hover {
  cursor: pointer;
  background: #80808017;
  color: #c41717cf;
}

.proclaim {
  width: 78%;
  height: 100%;
  float: left;
  overflow: auto;
}

.proclaim_list {
  width: 95%;
  min-width: 800px;
  height: 650px;
  margin: 20px auto 0 auto;
  padding: 0;
  list-style: none;
}

.proclaim_list li:first-child {
  height: 50px;
  border-top: 3px solid #59ccff;
  line-height: 50px;
  margin-top: 0;
}

.proclaim_list li:nth-child(2) {
  height: 50px;
  line-height: 50px;
}

.proclaim_list li {
  width: 100%;
  height: 35px;
  line-height: 35px;
  padding-top: 5px; /*由于v-for生成li 导致ul实质上为空，border,background均无效，通过padding来实现border连续*/
  padding-left: 12px;
  text-align: left;
  color: #333;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.proclaim_list li span {
  font-size: 12px;
  font-style: normal;
  color: #a7a7a7;
}

.proclaim_list li:hover {
  cursor: pointer;
  background: #80808017;
  color: #c41717cf;
}

.page_skip {
  width: 100%;
  height: 60px;
  float: left;
  color: #575757;
}

.page_skip ul {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.page_skip ul li {
  width: 80px;
  text-align: center;
  cursor: default;
}

.page_skip ul li:last-child {
  width: 150px;
}

.page_skip ul li button {
  width: 60px;
  height: 30px;
  color: #575757;
  font-size: 15px;
  border-radius: 3px;
  border: 1px solid #cccccc;
  background: #f1f1f1;
}

.page_skip ul li button:hover {
  color: white;
  background: #59ccff;
  transition: all 0.1s ease-out;
}

.procliam_particulars {
  width: 78%;
  height: 100%;
  float: left;
  overflow: auto;
}

.procliam_particulars img {
  width: 50px;
  height: 50px;
  float: left;
}

.procliam_particulars div {
  width: 1050px;
  height: 650px;
  margin: 20px auto 0 auto;
  padding: 0;
  list-style: none;
}

.procliam_particulars p {
  color: #575757;
}

.html >>> img {
  max-width: 100%;
  height: auto;
}

.procliam_particulars p:first-child {
  height: 50px;
  border-top: 3px solid #59ccff;
  line-height: 50px;
  text-align: center;
  font-size: 28px;
  margin: 0;
}

.procliam_particulars p:nth-child(2) {
  text-align: center;
}

.procliam_particulars p:last-child {
  text-align: right;
}
</style>